<template>
  <el-dialog
    title="助力用户"
    :visible.sync="open"
    width="600px"
    class="body"
    append-to-body
  >
    <div class="dialog-table">
      <el-table :data="tableData" row-key="userId" ref="table">
        <el-table-column prop="userId" label="会员ID"></el-table-column>
        <el-table-column prop="nickName" label="基本信息"></el-table-column>
        <el-table-column prop="location" label="助力位置"></el-table-column>
        <el-table-column prop="createTime" label="助力时间"></el-table-column>
      </el-table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getTeamAdminList,
  teamUserExchange,
} from "@/api/doubleCopy/teamManage";
import Sortable from "sortablejs";

export default {
  name: "TeamManageDialog",
  data() {
    return {
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   id: null,
      // },

      // 表格数据
      pageList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      tableData: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(
        ".body .el-dialog__body .el-table__body-wrapper tbody"
      );

      // const tbody = this.$refs.table.$el.querySelector(
      //   ".el-table__body-wrapper tbody"
      // );

      const _this = this;
      // if (tbody) {
      Sortable.create(tbody, {
        animation: 150, // 拖拽动画时间
        ghostClass: "sortable-ghost", // 拖拽时的样式类名

        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
          console.log(_this.tableData, "tableData");
          _this.tableData.forEach((element, index) => {
            element.location = index + 1;
          });
        },
      });
      // }
    },
    show(row) {
      this.tableData = row.teamAdminVos;

      // this.queryParams.id = row.userId;
      this.open = true;
      this.$nextTick(() => {
        this.rowDrop();
      });
      // this.getList();
    },
    // 查询团队列表
    // getList() {
    //   this.loading = true;
    //   getTeamAdminList(this.queryParams).then((response) => {
    //     this.tableData = response.rows[0].teamAdminVos;
    //     this.total = response.total;
    //     this.loading = false;
    //     this.$nextTick(() => {
    //       this.rowDrop();
    //     });
    //   });
    // },
    submitForm() {
      teamUserExchange(this.tableData).then((response) => {
        if (response.code == 200) {
          this.open = false;
          this.$modal.msgSuccess(response.msg);
        }
      });
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="less" scoped>
/* 自定义拖拽时的样式 */
.sortable-ghost {
  background-color: #f5f5f5;
  opacity: 0.8;
}
</style>
